<template>
  <div>
    <Card class="attendCard">
      <Tabs :animated="false" @on-click="tabsOnclick">
        <Button
          slot="extra"
          type="primary"
          icon="md-download"
          v-if="dayButton"
          :disabled="dayFlag"
          @click="dayClick"
        >导出日报</Button>
        <Button
          slot="extra"
          type="primary"
          icon="md-download"
          v-if="monthButton"
          :disabled="monthFlag"
          @click="monthClick"
        >导出月报</Button>
        <TabPane label="按日统计" name="day">
          <dayCount :dayPass="dayValue" @modifyDayFlag="modifyDayFlag($event)"></dayCount>
        </TabPane>
        <TabPane label="按月统计" name="month">
          <monthCount :monthPass="monthValue" @modifyMonthFlag="modifyMonthFlag($event)"></monthCount>
        </TabPane>
      </Tabs>
    </Card>
  </div>
</template>

<script>
import dayCountContent from "./dayCount";
import monthCountContent from "./monthCount";

export default {
  components: {
    dayCount: dayCountContent,
    monthCount: monthCountContent
  },
  data() {
    return {
      dayButton: true,
      dayFlag: true,
      monthButton: false,
      monthFlag: true,
      dayValue: "0",
      monthValue: "0",
      minHeight: false
    };
  },
  methods: {
    // 页面展示
    tabsOnclick(name) {
      if (name == "day") {
        this.dayButton = true;
        this.monthButton = false;
      } else {
        this.dayButton = false;
        this.monthButton = true;
      }
    },

    // 导出报表设置
    dayClick() {
      this.dayValue++;
    },
    monthClick() {
      this.monthValue++;
    },

    // 导出报表非空
    modifyDayFlag(flag){
      this.dayFlag = flag
    },

    modifyMonthFlag(flag){
      this.monthFlag = flag
    },
  },
  watch: {},
  mounted() {},
  computed: {},
  created() {},
  beforeDestroy() {
    this.dayButton = null;
    this.dayFlag = null;
    this.monthButton = null;
    this.monthFlag = null;
    this.dayValue = null;
    this.monthValue = null;
    this.minHeight = null;
  },
};
</script>

<style lang="less" scoped>
@import "./dayCount";
</style>

<style>
</style>

